/<template>
  <div>
      <header>地址管理</header>
      <!-- 地址列表 -->
      <main>
          <List :list="list"></List>
      </main>
      <footer>
          <button class="edit" @click="openMask">添加地址</button>
      </footer>
      <!-- 弹窗 -->
    <div class="mask" v-show="flag">
        <div class="cont">
            <span class="close" @click="flag=false">X</span>  
            <h1>{{title}}</h1>
            <van-address-edit
                :area-list="areaList"
                show-postal
                :address-info="addressInfo"
                show-set-default
                show-search-result
                :search-result="searchResult"
                :area-columns-placeholder="['请选择', '请选择', '请选择']"
                @save="onSave"
                @delete="onDelete"
                @change-detail="onChangeDetail"
                />
        </div>

    </div>
  </div>
</template>

<script>
import List from './List.vue'
import { areaList } from '@vant/area-data';
export default {
    components: {
        List,
    },
    data(){
        return{
            flag:false,
            title:'新增收货地址',
            list: [
                    {
                    addressDetail: "八维",
                    areaCode: "110101",
                    city: "北京市",
                    county: "东城区",
                    isDefault: true,
                    name: "卡瓦",
                    postalCode: "100000",
                    province: "北京市",
                    tel: "16112341234",
                    },
        ],
        areaList,
        searchResult:[],
        addressInfo:{},
        index:0
        } 
    },
    mounted() {
        this.bus.$on('changeflag',(item,index)=>{
            this.flag=true,
            this.title="修改收货地址",
            this.addressInfo=item,
            this.index=index
        })
    },
    methods: {
        openMask() {
            this.flag=true,
            this.title='新增收货地址'
        },
        onSave(obj){
            console.log('点击保存',obj);
            if(this.title=='新增收货地址'){
                this.list.push(obj);
            }else{
                this.list[this.index]=obj;
                this.list=[...this.list];

            }
            
            this.flag=false;
            this.addressInfo={}
        },
        onDelete(){
            console.log('点击删除');
        },
        onChangeDetail(){
            console.log('修改详情地址');
        }
    },
}
</script>

<style>  
    header{
        width: 100vw;
        height: 50px;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    main{
        width: 100vw;
        height: calc(100vh - 150px);
    }
    .edit{
        margin-left: 10vw;
        width: 80vw;
        height: 40px;
        background: rgb(255, 0, 0);
        color: white;
        border-radius: 10px;
        border:none;
    }

    .mask {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
        }
    .cont {
            width: 90%;
            height: 500px;
            background: #fff;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
        }
    .cont .close{
        position: absolute;
        right: 20px;
        margin-top: 5%;
        font-size: 20px;
        font-weight: 600;
    }
</style>